<template>
  <div>
    <gl-breadcrumb class="mb15"
                   text="软件应用管理,应用详情"></gl-breadcrumb>
    <div class="detail-main"
         style="background:#fff;">
      <div class="detail-head p20">
        <div>
          <img :src="info.icon"
               alt="">
        </div>
        <div class="right">
          <div class="flex name">{{info.name}}</div>
          <div class="flex">
            <span>应用类型：{{info.apk_type_msg}} </span>
            <span>关联客户：{{info.customer_name}}</span>
          </div>
          <div class="flex">
            <span>创建时间：{{tools.formatDate(info.update_time||'')}}</span>
            <span>创建人：{{info.create_name}}</span>
          </div>
        </div>
      </div>
      <div class="detail-list">
        <div class="list-tit pl20">
          <span class="tit">更新列表</span>
          <el-button size="mini"
                     type="primary"
                     @click="dialogVisible=true,title='新增安装包'">新增安装包</el-button>
        </div>
        <div class="list-box por">
          <div class="line poa"
               :style="{height:lineHeight+'px'}"></div>
          <div v-for="(item,index) in apkList"
               :key="index"
               class="itemBox"
               ref="item">
            <a class="dowmload"
               :href="item.full_url">下载安装包</a>
            <p class="item">应用版本：{{item.versions}}</p>
            <p class="item">上传时间：{{item.update_time}}</p>
            <p class="item">更新内容：</p>
            <p class="desc item"
               v-html="item.description"></p>
          </div>
        </div>

      </div>

    </div>

    <el-dialog :title="title"
               :visible.sync="dialogVisible">
      <gl-form ref="glForm"
               :form="form"
               :formLabel="formLabel"
               :must="must">
        <template slot="uploadFile">
          <gl-upload limit="1"
                     @success="uploadSuccess">
            <div class="file">
              <span v-if="!form.apk_url">
                点击上传
              </span>
              <span v-else
                    class="suc">上传成功</span>
            </div>
          </gl-upload>
        </template>
      </gl-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="addApk">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'appDetail',
  data() {
    return {
      id: '',
      info: {},
      dialogVisible: false,
      title: '',
      form: {
        name: '',
        versions: '',
        apk_url: '',
        is_forced_update: '',
        description: ''
      },
      formLabel: [
        { label: '安装包名称', prop: 'name' },
        { label: '版本号', prop: 'versions' },
        { label: '上传安装包', prop: 'apk_url', slot: 'uploadFile' },
        {
          label: '置顶更新',
          prop: 'is_forced_update',
          radio: [{ label: '是', value: '1' }, { label: '否', value: '0' }]
        },
        {
          label: '更新内容',
          prop: 'description',
          type: 'textarea',
          text: 'ueditor'
        }
      ],
      //   fileSavePath: '',
      apkList: [],
      lineHeight: '',
      must: 'name,versions,apk_url'
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getInfo()
    this.getAppList()
  },
  updated() {
    if (this.apkList && this.apkList.length) {
      this.$nextTick(() => {
        // console.log(this.$refs.item[2].offsetLeft)
        this.$refs.item &&
          (this.lineHeight = this.$refs.item[this.apkList.length - 1].offsetTop)
        // console.log(this.lineHeight)
      })
    }
  },
  watch: {
    apkList(val) {}
  },
  methods: {
    uploadSuccess(res, prop) {
      console.log(res)
      //   this.fileSavePath = res.data.savepath
      this.form.apk_url = res.savepath
    },
    getInfo() {
      this.http
        .$post('admin/app.api/get_info', {
          app_id: this.id
        })
        .then(r => {
          this.info = r
            // console.log(r)
        })
        .catch(this.$err)
    },
    addApk() {
      if (this.$refs.glForm.validate()) {
        this.http
          .$post('admin/app.Api/add_apk', {
            name: this.form.name,
            apk_url: this.form.apk_url,
            versions: this.form.versions,
            description: this.form.description,
            is_forced_update: this.form.is_forced_update,
            create_id: this.info.create_id,
            wa_id: this.info.id
          })
          .then(r => {
            this.getAppList()
            this.dialogVisible = false
            //   console.log(r)
          })
          .catch(this.$err)
      } else {
        return this.$message.error('请确认输入是否完整无误')
      }
    },
    getAppList() {
      this.http
        .$post('admin/app.Api/apk_list', {
          app_id: this.id
        },{loading:true})
        .then(r => {
        //   console.log(r)
          this.apkList = r
        })
        .catch(this.$err)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.file {
  height: 25px;
  line-height: 25px;
  padding: 2px 10px;
  border: 1px dashed #ccc;
  .suc {
    color: #409eff;
  }
}
.dowmload {
  position: absolute;
  right: 20px;
  top: 10px;
  border: 1px solid #ccc;
  text-decoration: none;
  font-weight: normal;
  width: 80px;
  height: 25px;
  line-height: 25px;
  font-size: 14px;
  text-align: center;
  color: #999;
//   background-color: #eee;
border-radius: 13px;
}
.detail-head {
  // align-items:
  display: flex;
  img {
    // display: inline-block;
    width: 200px;
    height: 200px;
  }
  .right {
    min-width: 480px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 14px;
    color: #666;
    .name {
      margin-bottom: 20px;
      font-size: 20px;
      color: #000;
    }
    .flex {
      justify-content: space-between;
      span {
        flex: 1;
      }
    }
  }
}
.detail-list {
  .tit {
    padding-left: 15px;
    margin-right: 20px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    border-left: 4px solid #409eff;
  }
  .list-box {
    margin-top: 20px;
    padding: 0 90px 50px 90px;
    .line {
      width: 1px;
      background-color: #ccc;
      left: 76px;
    }
    .itemBox {
      //   border: 1px solid #ccc;
      padding: 0px 20px;
      margin-bottom: 20px;
      background-color: #eee;
      font-weight: bold;
      color: #524d4d;
      position: relative;
      &:before {
        content: ' ';
        display: inline-block;
        width: 16px;
        height: 16px;
        box-sizing: border-box;
        border-radius: 50%;
        border: 2px solid #409eff;
        background-color: #fff;
        position: absolute;
        left: -22px;
        top: -4px;
      }
      .item {
        line-height: 30px;
      }
      .desc {
        padding-left: 32px;
      }
    }
  }
}
</style>